<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/back.png" />
      <!-- #ifndef MP-WEIXIN -->
      地图找车
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text>地图找车</text>
      <!-- #endif -->
    </view>
    <view class="mapTab">
      <view class="item" @click="cutClick(1)" :class="cuts == 1 ? 'active' : ''">找车辆</view>
      <view class="item" @click="cutClick(2)" :class="cuts == 2 ? 'active' : ''">
        <span>{{ dianpuText }}</span>
        <view class="administrations" v-if="cuts == 2 && shopSwitchchage">
          <text class="items" @click.stop="shopSwitchClick(1)"> 4S店 </text>
          <text class="items" @click.stop="shopSwitchClick(2)"> 汽贸店 </text>
          <text class="items" @click.stop="shopSwitchClick(3)"> 美容装饰 </text>
          <text class="items" style="border: none" @click.stop="shopSwitchClick(4)">
            维修保养
          </text>
        </view>
      </view>
      <view class="item" @click="cutClick(3)" :class="cuts == 3 ? 'active' : ''">找服务</view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <map
      class="map AppMap"
      :scale="13"
      id="map"
      @regionchange="regionchange"
      @anchorpointtap="regionchange"
      :markers="markerList"
      :longitude="logt"
      :latitude="lat"
      :style="'top:' + (statusBarHeight1 + 44 + 37) + 'px'"
    ></map>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view id="map" class="map" :style="'top:' + (statusBarHeight1 + 44 + 37) + 'px'"></view>
    <!-- #endif -->
    <!-- #ifndef APP -->
    <view class="listBox" :style="'bottom:' + shangyi + 'px'">
      <view>
        <image
          class="dingwei"
          @click="dingwei"
          src="https://pic.bangbangtongcheng.com/static/dingwei1.png"
        />
        <image
          :class="shangyi == 0 ? 'shang xia' : 'shang'"
          src="https://pic.bangbangtongcheng.com/static/you.png"
          @click="listBox_shang"
        />
        <view class="listTit">
          该区域内共有
          <span style="color: red"> {{ Recommend.length }} </span>
          <span>{{ cuts == 1 ? '辆车源' : cuts == 2 ? '家店铺' : '项服务' }}</span>
          <view class="paixu" v-if="cuts == 3">
            <view :class="checkchage ? 'checkboxChage' : 'checkbox'" @click="checkboxClick">
              <image
                v-if="checkchage"
                class="image"
                src="https://pic.bangbangtongcheng.com/static/bbcz/sduih.png"
              ></image> </view
            >免费项目
          </view>
          <view></view>
        </view>
        <view class="sous">
          <view class="sous_input">
            <input
              class="sous_input_s"
              v-model="searchKeyword"
              placeholder="搜索车源"
              type="text"
            />
            <image
              class="sous_input_img"
              src="https://pic.bangbangtongcheng.com/static/sousuo1.png"
            >
            </image>
          </view>
          <view class="sous_btn" @click="sousuoClick()">搜索</view>
        </view>
        <view class="px_sx" :class="{ 'flex-end': cuts == 3 }">
          <view class="pxu" v-show="cuts == 1" @click="showType = !showType">
            排序
            <view class="xuanz" v-if="showType">
              <text class="items" @click="sortClick(1)"> 按默认排序 </text>
              <text class="items" @click="sortClick(2)"> 按距离从近到远 </text>
              <text class="items" @click="sortClick(3)"> 价格从低到高 </text>
              <text class="items" @click="sortClick(4)" style="border: none"> 价格从高到低 </text>
            </view>
          </view>
          <view class="sxuan" v-show="cuts != 2" @click="showModal" data-target="DrawerModalR"
            >筛选</view
          >
        </view>
        <view class="list" v-if="Recommend.length != 0">
          <scroll-view
            scroll-y
            style="height: 500px"
            lower-threshold="20"
            @scrolltolower="bottomScroll"
            refresher-background="#f5f5f5"
            :scroll-top="scrollTopNum"
            scroll-y
            @scroll="scrollTopFuc"
          >
            <template v-if="cuts == 1">
              <view
                class="liss"
                v-for="(item, index) in Recommend"
                :key="index"
                @click="details(item)"
              >
                <image mode="aspectFit" :src="item.vehicleCoverPicture" />
                <view class="li_2" style="max-width: 336rpx">
                  <view class="vehicleRecom">
                    <span class="tagLabel">{{
                      item.vehicleType == 1
                        ? '到店新车'
                        : item.vehicleType == 2
                        ? '二手车'
                        : '在售车系'
                    }}</span>
                    <!-- <span v-if="item.vehicleType==2">{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.mileage<10000?item.mileage+"公里/":(item.mileage/10000).toFixed(1)+"万公里/"}} {{item.licensingTimeYear}}</span>
										<span v-else>{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?(item.vehicleBrandModel.split('|')[1] + "/"):""}} {{item.model?item.model+'/':""}} {{item.bodyStructureDoors+"门"+item.bodyStructureSeat+"座"+item.bodyStructureVehicle+"车"}}</span> -->
                    <text>{{ item.title }}</text>
                  </view>
                  <view class="price" v-if="item.vehicleType == 3">
                    {{ item.intervalPrice }}万
                  </view>
                  <view class="price" v-else> {{ item.price }}万 </view>
                </view>
              </view>
            </template>
            <template v-else-if="cuts == 2">
              <view
                class="liss"
                v-for="(item, index) in Recommend"
                :key="index"
                @click="details(item)"
              >
                <image mode="aspectFit" :src="item.storeCoverImage" />
                <view class="li_3" style="max-width: 336rpx">
                  <view class="title">{{ item.storeName }}</view>
                  <view class="content">
                    {{ item.officeAddress }}
                  </view>
                </view>
              </view>
            </template>
            <template v-else-if="cuts == 3">
              <view
                class="liss"
                v-for="(item, index) in Recommend"
                :key="index"
                @click="details(item)"
              >
                <image mode="aspectFit" :src="item.coverPhoto" />
                <view class="li_3" style="max-width: 336rpx">
                  <view class="servicesAvailable">{{ item.title }}</view>
                  <view class="serviceContent">
                    {{ item.entryDescription }}
                  </view>
                </view>
              </view>
            </template>
          </scroll-view>
        </view>
      </view>
      <view class="list" v-if="Recommend.length == 0" style="height: 500px">
        <p
          style="
            text-align: center;
            font-size: 34rpx;
            color: #666;
            padding-top: 50rpx;
            font-size: 30rpx;
          "
        >
          {{
            cuts == 1
              ? '该区域暂无车源信息，请重新选择'
              : cuts == 2
              ? '该区域暂无店铺信息，请重新选择'
              : '该区域暂无服务信息，请重新选择'
          }}
        </p>
      </view>
      <view></view>
      <view></view>
    </view>
    <!-- #endif -->
    <!-- #ifndef APP -->
    <view
      class="cu-modal drawer-modal justify-end"
      v-if="cuts == 1"
      :class="modalName == 'DrawerModalR' ? 'show' : ''"
    >
      <scroll-view scroll-y="true">
        <view
          class="tittit"
          v-if="!selectBrand && !selectSeries"
          :style="[{ top: 'calc(' + CustomBar1 + 'px' + ' + 36px )' }]"
        >
          <view @click="hideModal()">×</view>筛选
        </view>
        <view
          class="cu-dialog basis-lg"
          v-if="!selectBrand && !selectSeries"
          @tap.stop
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
              height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
            },
          ]"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx"></view>
            <view class="choiceCarSeries" v-if="xzrangeData.length != 0">
              <view class="item" v-for="(i, j) in xzrangeData" :key="i.id">
                <span class="choiceCarSeriesName">{{ i.brandName }} {{ i.seriesName || '' }}</span>
                <span class="close" @click="qxchooseCars(i.id)">×</span>
              </view>
            </view>
            <view class="mianji">
              车辆类别
              <view class="list">
                <view class="radio" @click.stop="tabClicklb(1)">
                  <view
                    class="radio_item"
                    :class="referCarSourceData.vehicleType == 1 ? 'radioxz' : ''"
                  >
                  </view>
                  <span>到店新车</span>
                </view>
                <view class="radio" @click.stop="tabClicklb(2)">
                  <view
                    class="radio_item"
                    :class="referCarSourceData.vehicleType == 2 ? 'radioxz' : ''"
                  >
                  </view>
                  <span>二手车</span>
                </view>
                <view class="radio" @click.stop="tabClicklb(3)">
                  <view
                    class="radio_item"
                    :class="referCarSourceData.vehicleType == 3 ? 'radioxz' : ''"
                  >
                  </view>
                  <span>在售车系</span>
                </view>
              </view>
            </view>
            <view class="leibie">
              车辆类型
              <span style="color: #999999">（请选择类型）</span>
              <view class="list">
                <view
                  @click.stop="type4Click(index)"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type4"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="quyu" v-if="cheType != '老年代步车' && cheType != '农用车'">
              品牌车系
              <view class="list">
                <view class="chooseCars" @click.stop="selectBrandChage"> 选择品牌车系 </view>
              </view>
            </view>
            <view class="mianji" v-if="cheType != '老年代步车' && cheType != '农用车'">
              变速箱
              <view class="list">
                <view class="radio" @click.stop="tabClickbs(1)">
                  <view class="radio_item" :class="bsChage == 1 ? 'radioxz' : ''"></view>
                  <span>自动</span>
                </view>
                <view class="radio" @click.stop="tabClickbs(2)">
                  <view class="radio_item" :class="bsChage == 2 ? 'radioxz' : ''"></view>
                  <span>手动</span>
                </view>
              </view>
            </view>
            <view class="mianji">
              价格
              <view class="list">
                <view
                  class="radio"
                  @click.stop="tabClickjg(i.valueNum)"
                  v-for="(i, j) in type8"
                  :key="i.valueNum"
                >
                  <view
                    class="radio_item"
                    :class="type8index == i.valueNum ? 'radioxz' : ''"
                  ></view>
                  <span>{{ i.valueName }}</span>
                </view>
              </view>
              <view class="customPrice">
                <span style="font-size: 28rpx; font-weight: 500; color: #333333; margin-right: 8rpx"
                  >自定义</span
                >
                <view class="minimumPrice">
                  <input class="input" v-model="referCarSourceData.minimumPrice" type="text" />
                </view>
                <span style="margin: 0 10rpx">-</span>
                <view class="ceilePrice">
                  <input
                    class="input"
                    v-model="referCarSourceData.highestPrice"
                    type="text"
                  /> </view
                ><span style="margin-left: 8rpx">万</span>
                <view class="confirm" @click="firmPrice()"> 确定 </view>
              </view>
            </view>
            <view
              class="mianji"
              v-if="
                referCarSourceData.vehicleType != 1 &&
                cheType != '老年代步车' &&
                cheType != '农用车'
              "
            >
              车龄
              <view class="list">
                <view
                  class="radio"
                  @click.stop="tabClickcl(i.valueNum)"
                  v-for="(i, j) in type9"
                  :key="i.valueNum"
                >
                  <view
                    class="radio_item"
                    :class="type9index == i.valueNum ? 'radioxz' : ''"
                  ></view>
                  <span>{{ i.valueName }}</span>
                </view>
              </view>
            </view>
            <view
              class="mianji"
              v-if="type5index != '新能源' && cheType != '老年代步车' && cheType != '农用车'"
            >
              排量
              <view class="list">
                <view
                  class="radio"
                  @click.stop="tabClickpl(i.valueNum)"
                  v-for="(i, j) in type10"
                  :key="i.valueNum"
                >
                  <view
                    class="radio_item"
                    :class="type10index == i.valueNum ? 'radioxz' : ''"
                  ></view>
                  <span>{{ i.valueName }}</span>
                </view>
              </view>
            </view>
            <view
              class="leibie"
              v-if="type5index != '新能源' && cheType != '老年代步车' && cheType != '农用车'"
            >
              排放标准
              <view class="list">
                <view
                  @click.stop="type6Click(index)"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type6"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="mianji" v-if="cheType != '老年代步车' && cheType != '农用车'">
              燃油类型
              <view class="list">
                <view
                  class="radio"
                  @click.stop="tabClickry(i.valueNum)"
                  v-for="(i, j) in type5"
                  :key="i.valueNum"
                >
                  <view
                    class="radio_item"
                    :class="type5index == i.valueNum ? 'radioxz' : ''"
                  ></view>
                  <span>{{ i.valueName }}</span>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="tittit"
          v-if="selectBrand"
          :style="[{ top: 'calc(' + CustomBar1 + 'px' + ' + 36px )' }]"
        >
          <view @click.stop="selectBrandfh()">
            <image
              style="width: 40rpx; height: 40rpx"
              src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
            ></image> </view
          >选择品牌
        </view>
        <view
          class="cu-dialog basis-lg"
          v-if="selectBrand"
          @tap.stop
          style="background-color: #fff"
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
              height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
            },
          ]"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx"></view>
            <view class="buxian" @click.stop="selectSeriesChage()">不限品牌</view>
            <u-index-list :index-list="indexList" :customNavHeight="viewHight">
              <view v-for="(item, index) in brandArr" :key="index">
                <!-- #ifdef APP-NVUE -->
                <u-index-anchor :text="indexList[index]"></u-index-anchor>
                <!-- #endif -->
                <u-index-item>
                  <!-- #ifndef APP-NVUE -->
                  <u-index-anchor :text="indexList[index]"></u-index-anchor>
                  <!-- #endif -->
                  <view
                    class="list-cell"
                    @click.stop="selectSeriesChage(cell)"
                    v-for="(cell, indexs) in item"
                    :key="indexs"
                  >
                    <view class="list-cell-left">
                      <image class="list-cell-left-image" :src="cell.brandImage"></image>
                      <span class="list-cell-left-span">{{ cell.brandName }}</span>
                    </view>
                    <!-- <image class="list-cell-right"
											src="https://pic.bangbangtongcheng.com/static/bbcz/youjt.png" mode="">
										</image> -->
                  </view>
                </u-index-item>
              </view>
            </u-index-list>
          </view>
        </view>
        <view
          class="tittit"
          v-if="selectSeries"
          :style="[{ top: 'calc(' + CustomBar1 + 'px' + ' + 36px )' }]"
        >
          <view @click.stop="selectSeriesfh()">
            <image
              style="width: 40rpx; height: 40rpx"
              src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
            ></image> </view
          >选择车系
        </view>
        <view
          class="cu-dialog basis-lg"
          v-if="selectSeries"
          @tap.stop
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
              height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
            },
          ]"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx"></view>
            <view class="vehicleBrand">
              <image class="vehicleBrand_image" :src="xzchelxx.brandImage" mode=""></image>
              <span class="vehicleBrand_span">{{ xzchelxx.brandName }}</span>
            </view>
            <view class="vehicleBrand-xzcx"> 选择车系 </view>
            <view
              class="buxian"
              style="border-bottom: 1px solid #f0f0f0; padding-left: 40rpx"
              @click="chooseCars()"
              >不限车系</view
            >
            <view
              class="vehicleBrand_item"
              v-for="(i, j) in rangeData"
              :key="i.id"
              @click="chooseCars(i)"
            >
              <image class="vehicleBrand_item_image" :src="i.seriesImage" mode=""></image>
              <span class="vehicleBrand_item_span">{{ i.seriesName }}</span>
            </view>
          </view>
        </view>
        <view class="di">
          <view class="div l" @click.stop="cz">重置</view>
          <view class="div r" @click.stop="sx">确定</view>
        </view>
      </scroll-view>
    </view>
    <view
      class="cu-modal drawer-modal justify-end"
      v-else-if="cuts == 3"
      :class="modalName == 'DrawerModalR' ? 'show' : ''"
    >
      <scroll-view scroll-y="true">
        <view class="tittit" :style="[{ top: 'calc(' + CustomBar1 + 'px' + ' + 36px )' }]">
          <view @click="hideModal()">×</view>筛选
        </view>
        <view
          class="cu-dialog basis-lg"
          @tap.stop
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
              height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
            },
          ]"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx"></view>
            <view class="leibie">
              服务项目
              <view class="list">
                <view
                  @click.stop="type2Click(index)"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type2"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <view class="di">
          <view class="div l" @click.stop="fwcz">重置</view>
          <view class="div r" @click.stop="fwsx">确定</view>
        </view>
      </scroll-view>
    </view>
    <!-- #endif -->
    <uniBall></uniBall>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  import { TMap } from '../components/TMap'
  //#ifdef H5
  import wxshare from '../utils/index.js'
  //#endif
  export default {
    data() {
      return {
        scrollTopNum: 0,
        oldScrollTopNum: 0,
        userInfo: uni.getStorageSync('Pduser'),
        typeIndex: 1,
        markersArray: [],
        markersArrays: [],
        map: '',
        yuanLat: '',
        yuanLogt: '',
        lat: '',
        logt: '',
        shangyi: -315,
        sousuo: true,
        xuan: 1,
        modalName: '',
        pageSize: 10,
        pageNo: 1,
        Recommend: [],
        Recount: '',
        imgUrl: this.$imgSrc,
        showType: false,
        orderSort: '1',
        scrollTop: '0',
        trigger: false,
        downStatus: true,
        upStatus: true,
        CustomBar1: '',
        distance: 3000,
        _mapContext: null,
        yuan: {},
        markerList: [],
        latitude: '',
        longitude: '',
        cuts: 1,
        screenWidth: 300,
        screendw: 0,
        pagingList: [],
        page: 1,
        shopSwitch: -1,
        shopSwitchchage: false,
        checkchage: false,
        type2: [],
        type4: [],
        type5: [],
        type5index: -1,
        type6: [],
        type8: [],
        type8index: -1,
        type9: [],
        type9index: -1,
        type10: [],
        type10index: -1,
        selectBrand: false,
        selectSeries: false,
        bsChage: 1,
        lbChage: 1,
        indexList: [],
        brandArr: [],
        // 选中的车辆信息
        xzchelxx: {},
        // 车系数据
        rangeData: [],
        // 选择的车系信息
        xzrangeData: [],
        //找车数据
        referCarSourceData: {
          pageSize: 9999,
          pageNo: 1,
          vehicleType: '',
          vehicleClassification: '',
          vehicleBrandModel: '',
          model: '',
          fuelType: '',
          transmissionCase: '',
          price: '',
          displacement: '',
          emissionStandard: '',
          vehicleAge: '',
          searchKeyword: '',
          sort: '',
          minimumPrice: '',
          highestPrice: '',
        },
        cheType: '',
        searchKeyword: '',
        sortData: '',
        dianpuText: '找店铺',
        //找店铺数据
        referstoreData: {
          pageSize: 9999,
          pageNo: 1,
          searchKeyword: '',
          sort: '',
          storeType: '',
        },
        //找服务数据
        referserveData: {
          pageSize: 9999,
          pageNo: 1,
          searchKeyword: '',
          sort: '',
          entryName: '',
          whetherFreeService: '',
          viewHight: '',
        },
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onLoad(options) {
      uni.getSystemInfo({
        success: (res) => {
          this.screenWidth = res.screenWidth
        },
      })
      this.distance = this.screenWidth * 0.8
      this.getType()
      this.CustomBar1 = this.CustomBar
      // 获取窗口信息
      let getWindowInfo = uni.getWindowInfo()
      let isAndroid = false
      const res = uni.getSystemInfoSync()
      if (res.platform == 'android') {
        this.viewHight = getWindowInfo.screenHeight - (this.CustomBar1 + 36 + 80 + 50)
      } else {
        this.viewHight = getWindowInfo.screenHeight - (this.CustomBar1 + 36 + 80 + 100)
      }
      if (uni.getStorageSync('locationState') == 1) {
        this.getLocation()
      }
      // #ifdef H5
      this.jinzhi()
      // #endif
    },
    async onPullDownRefresh() {
      this.Recommend = []
      this.pageNo = 1
      this.downStatus = true
      if (this.upStatus) {
        this.trigger = true
        await this.getRecommend()
      }
    },
    mounted() {
      // #ifdef H5
      this.initMap()
      // #endif
    },
    onUnload() {
      uni.$off('closese')
      uni.$off('confirm')
    },
    methods: {
      firmPrice() {
        if (!this.referCarSourceData.minimumPrice) {
          uni.showToast({
            title: '最低价不能为空',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.referCarSourceData.highestPrice) {
          uni.showToast({
            title: '最高价不能为空',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (
          Number(this.referCarSourceData.minimumPrice) >
          Number(this.referCarSourceData.highestPrice)
        ) {
          uni.showToast({
            title: '最低价不能高于最高价',
            icon: 'none',
            mask: true,
          })
          return
        }
        this.type8index = -1
        this.referCarSourceData.price = ''
      },
      sortClick(index) {
        this.sortData = index
        if (this.cuts == 1) {
          this.referCarSourceData.sort = index
          this.Recommend = []
          this.getRecommend()
        } else if (this.cuts == 2) {
          this.referstoreData.sort = index
          this.Recommend = []
          this.getRecommend()
        } else if (this.cuts == 3) {
          this.referserveData.sort = index
          this.Recommend = []
          this.getRecommend()
        }
      },
      sousuoClick() {
        if (this.cuts == 1) {
          this.referCarSourceData.searchKeyword = this.searchKeyword
          this.Recommend = []
          this.getRecommend()
        } else if (this.cuts == 2) {
          this.referstoreData.searchKeyword = this.searchKeyword
          this.Recommend = []
          this.getRecommend()
        } else if (this.cuts == 3) {
          this.referserveData.searchKeyword = this.searchKeyword
          this.Recommend = []
          this.getRecommend()
        }
      },
      // 分页
      getExport() {
        this.page = 1
        this.pagingList = this.getpage(this.page, this.Recommend)
      },
      getpage(page, list) {
        let sindex = (parseInt(page) - 1) * 10
        let eindex = parseInt(page) * 10
        let newList = list.slice(sindex, eindex)
        return newList
      },
      bottomScroll() {
        if (this.pagingList.length == this.Recommend.length) {
          uni.showToast({
            title: '已经到最底部了',
            icon: 'none',
          })
          return
        }
        this.page += 1
        uni.showLoading({
          title: '加载中',
        })
        setTimeout(() => {
          this.pagingList = [...this.pagingList, ...this.getpage(this.page, this.Recommend)]
          uni.hideLoading()
        }, 500)
      },
      // 店铺选择切换
      shopSwitchClick(index) {
        this.shopSwitch = index
        if (index == 1) {
          // 4S店
          this.dianpuText = '找4S店'
        } else if (index == 2) {
          // 汽贸店
          this.dianpuText = '找汽贸店'
        } else if (index == 3) {
          // 美容装饰
          this.dianpuText = '找美容装饰'
        } else if (index == 4) {
          // 维修保养
          this.dianpuText = '找维修保养'
        }
        this.shopSwitchchage = false
        this.referstoreData.storeType = index
        this.Recommend = []
        this.getRecommend()
      },
      checkboxClick() {
        this.checkchage = !this.checkchage
        if (this.checkchage) {
          this.referserveData.whetherFreeService = 1
        } else {
          this.referserveData.whetherFreeService = ''
        }
        this.Recommend = []
        this.getRecommend()
      },
      selectBrandChage() {
        this.selectBrand = true
        this.brandArr = []
        this.brandInformation()
      },
      selectBrandfh() {
        this.selectBrand = false
      },
      selectSeriesChage(item) {
        if (!item) {
          this.selectBrandfh()
          return
        }
        this.selectSeries = true
        this.selectBrand = false
        this.xzchelxx = item
        this.modelInformation(item.id)
      },
      selectSeriesfh() {
        this.selectSeries = false
        this.selectBrand = true
      },
      tabClickbs(e) {
        this.bsChage = e
        if (e == 1) {
          this.referCarSourceData.transmissionCase = 1
        } else {
          this.referCarSourceData.transmissionCase = 2
        }
      },
      tabClicklb(e) {
        this.referCarSourceData.vehicleType = e
      },
      tabClickjg(e) {
        this.type8index = e
        this.referCarSourceData.price = e
        this.referCarSourceData.minimumPrice = ''
        this.referCarSourceData.highestPrice = ''
      },
      tabClickcl(e) {
        this.type9index = e
      },
      tabClickpl(e) {
        this.type10index = e
      },
      tabClickry(e) {
        this.type5index = e
        if (e == '新能源') {
          this.referCarSourceData.emissionStandard = ''
          this.referCarSourceData.fuelType = ''
          this.type10index = -1
          this.type6.forEach((el) => {
            el.active = false
          })
        }
      },
      // 获取车辆品牌信息
      brandInformation() {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/queryVehicleBrandList', {
            vehicleClassification: this.cheType,
          })
          .then((res) => {
            let arr = res.vehicleBrandMapList
            let indexList = []
            for (let i in arr) {
              this.brandArr.push(arr[i])
              indexList.push(arr[i][0].initial)
            }
            this.indexList = indexList
          })
      },
      // 获取车系信息
      modelInformation(id) {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/queryVehicleSeriesListByBrandId', {
            brandId: id,
          })
          .then((res) => {
            this.rangeData = res.vehicleSeriesList
          })
      },
      chooseCars(item) {
        if (!item) {
          this.xzrangeData.push(this.xzchelxx)
          this.selectSeries = false
          this.selectBrand = false
          return
        }
        item.brandName = this.xzchelxx.brandName
        this.xzrangeData.push(item)
        this.selectSeries = false
        this.selectBrand = false
      },
      qxchooseCars(id) {
        this.xzrangeData.forEach((v, j) => {
          if (v.id == id) {
            this.xzrangeData.splice(j, 1)
          }
        })
      },
      scrollTopFuc(e) {
        // if (this.screendw == 0) {
        // 	this.listBox_shang()
        // 	this.screendw = 1
        // }
        // if (this.screendw !== 0) {
        // 	this.listBox_shang()
        // 	this.screendw = 0
        // }
        //记录scroll  位置
        this.oldScrollTopNum = e.detail.scrollTop
      },
      adjustScrollTop() {
        //视图会发生重新渲染
        this.scrollTopNum = this.oldScrollTopNum
        //当视图渲染结束 重新设置为0
        this.$nextTick(() => {
          this.scrollTopNum = 0
        })
      },
      //wx的自己定位
      WXitself() {
        this.markerList.push({
          id: 2,
          latitude: Number(this.yuanLat),
          longitude: Number(this.yuanLogt),
          iconPath: 'https://pic.bangbangtongcheng.com/523c5245ee0f4ec683aeb3b1910887e0',
          width: 30,
          height: 30,
        })
      },
      // H5的自己定位
      H5itself() {
        var center = new qq.maps.LatLng(this.yuanLat, this.yuanLogt)
        var anchor = new qq.maps.Point(15, 15),
          size = new qq.maps.Size(30, 30),
          scaleSize = new qq.maps.Size(30, 30),
          origin = new qq.maps.Point(0, 0),
          icon = new qq.maps.MarkerImage(
            'https://pic.bangbangtongcheng.com/523c5245ee0f4ec683aeb3b1910887e0',
            size,
            origin,
            anchor,
            scaleSize
          )
        var marker = new qq.maps.Marker({
          icon: icon,
          position: center,
          map: this.map,
        })
        this.markersArrays.push(marker)
      },
      cutClick(cut) {
        this.sortData = ''
        switch (cut) {
          case 1:
            //找车辆
            this.cuts = cut
            this.searchKeyword = ''
            this.cz()
            ;(this.referCarSourceData = {
              pageSize: 9999,
              pageNo: 1,
              vehicleType: '',
              vehicleClassification: '',
              vehicleBrandModel: '',
              model: '',
              fuelType: '',
              transmissionCase: '',
              price: '',
              displacement: '',
              emissionStandard: '',
              vehicleAge: '',
              searchKeyword: '',
              sort: '',
              minimumPrice: '',
              highestPrice: '',
            }),
              (this.Recommend = [])
            this.getRecommend()
            break
          case 2:
            //找店铺
            this.cuts = cut
            this.dianpuText = '找店铺'
            ;(this.referstoreData = {
              pageSize: 9999,
              pageNo: 1,
              searchKeyword: '',
              sort: '',
              storeType: '',
            }),
              (this.searchKeyword = '')
            this.Recommend = []
            this.getRecommend()
            this.shopSwitchchage = !this.shopSwitchchage
            break
          case 3:
            //找服务
            this.cuts = cut
            this.searchKeyword = ''
            this.checkchage = false
            ;(this.referserveData = {
              pageSize: 9999,
              pageNo: 1,
              searchKeyword: '',
              sort: '',
              entryName: '',
              whetherFreeService: 0,
            }),
              (this.Recommend = [])
            this.getRecommend()
            break
        }
      },
      async getLocation() {
        this.getLocation1()
      },
      getCenterLanLat() {
        this._mapContext = uni.createMapContext('map', this)
        this._mapContext.getScale({
          success: (res) => {
            this.calculateDis(res.scale)
          },
        })
        this._mapContext.getCenterLocation({
          success: (res) => {
            this.markerList = []
            let markerList = []
            markerList.push({
              id: 1,
              latitude: res.latitude,
              longitude: res.longitude,
              iconPath: 'https://pic.bangbangtongcheng.com/static/yuan.png',
              width: this.screenWidth,
              height: this.screenWidth,
              anchor: {
                x: 0.5,
                y: 0.5,
              },
            })
            this.yuan = {
              id: 1,
              latitude: res.latitude,
              longitude: res.longitude,
              iconPath: 'https://pic.bangbangtongcheng.com/static/yuan.png',
              width: this.screenWidth,
              height: this.screenWidth,
              anchor: {
                x: 0.5,
                y: 0.5,
              },
            }
            this.lat = res.latitude
            this.logt = res.longitude
            this.markerList = markerList
            this.pageNo = 1
            this.getRecommend()
          },
          fail() {
            console.log('定位失败？')
          },
        })
      },
      details(item) {
        if (this.cuts == 1) {
          uni.navigateTo({
            url: '/pages_owner/index/vehicleDetails?id=' + item.id,
          })
        } else if (this.cuts == 2) {
          console.log(item.storeType)
          if (item.storeType == 1 || item.storeType == 2) {
            uni.navigateTo({
              url: '/pages_owner/dealer/dealerDetails?id=' + item.id,
            })
          } else {
            uni.navigateTo({
              url: '/pages_owner/ownerService/ownerServiceDetails?id=' + item.id,
            })
          }
        } else if (this.cuts == 3) {
          uni.navigateTo({
            url: '/pages_owner/ownerService/servicesAvailableDetails?id=' + item.id,
          })
        }
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      dingwei() {
        this.lat = this.yuanLat
        this.logt = this.yuanLogt
        this.Recommend = []
        // #ifdef H5
        this.initMap()
        // #endif
      },
      listBox_shang() {
        if (this.shangyi == 0) {
          this.shangyi = -315
          this.screendw = 1
        } else {
          this.shangyi = 0
          this.screendw = 0
        }
      },
      getLocation1() {
        let that = this
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          success(res) {
            that.yuanLat = res.latitude
            that.yuanLogt = res.longitude
            that.lat = res.latitude
            that.logt = res.longitude
            console.log(res.latitude, res.longitude, '==')
            // #ifdef H5
            that.initMap()
            // #endif
            // #ifdef MP-WEIXIN
            that.initYuan(that.lat, that.logt)
            // #endif
          },
          fail(res) {
            console.log(res, '经纬度没有授权')
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              uni.showModal({
                title: '提示',
                content: '您已关闭位置权限或获取位置信息失败',
                success: function (res) {
                  if (res.confirm) {
                    // plus.runtime.openURL("app-settings:");
                    if (plus.os.name === 'iOS') {
                      plus.runtime.openURL('app-settings://')
                    } else {
                      var Intent = plus.android.importClass('android.content.Intent')
                      var Settings = plus.android.importClass('android.provider.Settings')
                      var Uri = plus.android.importClass('android.net.Uri')
                      var mainActivity = plus.android.runtimeMainActivity()
                      var intent = new Intent()
                      intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                      var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
                      intent.setData(uri)
                      mainActivity.startActivity(intent)
                    }
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                },
              })
              return false
            }
          },
        })
      },
      initYuan(lat, logt) {
        this.markerList = []
        let markerList = []
        markerList.push({
          id: 1,
          latitude: lat,
          longitude: logt,
          iconPath: 'https://pic.bangbangtongcheng.com/static/yuan.png',
          width: this.screenWidth,
          height: this.screenWidth,
          anchor: {
            x: 0.5,
            y: 0.5,
          },
        })
        this.yuan = {
          id: 1,
          latitude: lat,
          longitude: logt,
          iconPath: 'https://pic.bangbangtongcheng.com/static/yuan.png',
          width: this.screenWidth,
          height: this.screenWidth,
          anchor: {
            x: 0.5,
            y: 0.5,
          },
        }
        this.lat = lat
        this.logt = logt
        this.markerList = markerList
        this.WXitself()
        this.pageNo = 1
        this.getRecommend()
      },
      showModal(e) {
        console.log(this.referCarSourceData)
        // #ifndef APP
        this.modalName = e.currentTarget.dataset.target
        // #endif
      },
      hideModal(e) {
        this.modalName = null
      },
      fwcz() {
        this.referserveData.entryName = ''
        let that = this
        this.type2.forEach((el) => {
          el.active = false
        })
        this.Recommend = []
        this.downStatus = true
        this.modalName = null
        this.getRecommend()
      },
      fwsx() {
        let that = this
        this.referserveData.entryName = ''
        let entryName = []
        this.type2.forEach((el) => {
          if (el.active == true) {
            entryName.push(el.valueName)
          }
        })
        that.referserveData.entryName = entryName.join(',')
        this.Recommend = []
        this.downStatus = true
        this.modalName = null
        this.getRecommend()
      },
      cz() {
        this.type4.forEach((el) => {
          el.active = false
        })
        this.type5index = -1
        this.type6.forEach((el) => {
          el.active = false
        })
        this.type10index = -1
        this.type8index = -1
        this.type9index = -1
        this.xzrangeData = []
        this.bsChage = ''
        ;(this.referCarSourceData = {
          pageSize: 9999,
          pageNo: 1,
          vehicleType: '',
          vehicleClassification: '',
          vehicleBrandModel: '',
          model: '',
          fuelType: '',
          transmissionCase: '',
          price: '',
          displacement: '',
          emissionStandard: '',
          vehicleAge: '',
          minimumPrice: '',
          highestPrice: '',
        }),
          (this.referCarSourceData.searchKeyword = this.searchKeyword)
        this.referCarSourceData.sort = this.sortData
        this.Recommend = []
        this.downStatus = true
        this.modalName = null
        this.getRecommend()
      },
      sx() {
        let that = this
        let arr = []
        this.referCarSourceData.vehicleClassification = ''
        this.referCarSourceData.emissionStandard = ''
        this.xzrangeData.forEach((v) => {
          if (v.seriesName) {
            let as = v.brandName + '|' + v.seriesName
            arr.push(as)
          } else {
            let as = v.brandName
            arr.push(as)
          }
        })
        this.referCarSourceData.vehicleBrandModel = arr.join(',')
        this.type4.forEach((el) => {
          if (el.active == true) {
            this.referCarSourceData.vehicleClassification = el.valueName
          }
        })
        this.referCarSourceData.fuelType = this.type5index == -1 ? '' : this.type5index
        this.type6.forEach((el) => {
          if (el.active == true) {
            this.referCarSourceData.emissionStandard = el.valueName
          }
        })
        this.referCarSourceData.vehicleAge = this.type9index == -1 ? '' : this.type9index
        this.referCarSourceData.displacement = this.type10index == -1 ? '' : this.type10index
        this.Recommend = []
        this.downStatus = true
        this.modalName = null
        this.getRecommend()
      },
      type2Click(index) {
        let that = this
        this.type2.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type2[index1], 'active', !el.active)
          }
        })
      },
      type4Click(index) {
        let that = this
        this.type4.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type4[index1], 'active', !el.active)
            this.cheType = that.type4[index1].valueName
            this.brandInformation()
            if (
              that.type4[index1].valueName == '老年代步车' ||
              that.type4[index1].valueName == '农用车'
            ) {
              this.type5index = -1
              this.type8index = -1
              this.type6.forEach((el) => {
                el.active = false
              })
              this.type10index = -1
              this.type8index = -1
              this.xzrangeData = []
              this.bsChage = ''
              this.referCarSourceData.vehicleBrandModel = ''
              this.referCarSourceData.transmissionCase = ''
              this.referCarSourceData.displacement = ''
              this.referCarSourceData.emissionStandard = ''
              this.referCarSourceData.fuelType = ''
              this.referCarSourceData.vehicleAge = ''
            }
          } else {
            that.type4[index1].active = false
          }
        })
      },
      type6Click(index) {
        let that = this
        this.type6.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type6[index1], 'active', !el.active)
          } else {
            that.type6[index1].active = false
          }
        })
      },
      getType() {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/queryDataDictionaryList', {
            type: '2,4,5,6,8,9,10',
          })
          .then((res) => {
            res.dataDictionaryList.forEach((el) => {
              el.active = false
              if (el.type == 2) {
                that.type2.push(el)
              } else if (el.type == 4) {
                that.type4.push(el)
              } else if (el.type == 5) {
                that.type5.push(el)
              } else if (el.type == 6) {
                that.type6.push(el)
              } else if (el.type == 8) {
                that.type8.push(el)
              } else if (el.type == 9) {
                that.type9.push(el)
              } else if (el.type == 10) {
                that.type10.push(el)
              }
            })
          })
      },
      getRecommend() {
        if (this.markersArrays) {
          for (var i in this.markersArrays) {
            this.markersArrays[i].setMap(null)
          }
          this.markersArrays.length = 0
        }
        this.upStatus = false
        if (this.cuts == 1) {
          this.mapFind()
        } else if (this.cuts == 2) {
          this.mapStore()
        } else if (this.cuts == 3) {
          this.mapService()
        }
      },
      // 地图找车
      mapFind() {
        let that = this
        this.referCarSourceData.distance = this.distance
        this.referCarSourceData.latitude = this.lat
        this.referCarSourceData.longitude = this.logt
        this.$myRequest
          .get('/api/mobile/vehicleOwner/mapSearchVehicle', this.referCarSourceData)
          .then((res) => {
            let houseNumber = res.mapSearchVehicleList.pageList.length
            let toHouse = Number(String(houseNumber).substring(0, 1)) + 1
            // #ifdef H5
            that.downStatus = false
            that.upStatus = true
            that.trigger = false
            if (res.success && res.mapSearchVehicleList.pageCount > 0) {
              that.Recommend = res.mapSearchVehicleList.pageList
              that.Recount = res.mapSearchVehicleList.pageCount
              that.markersArrays = []
              this.getExport()
              res.mapSearchVehicleList.pageList.forEach((e, i) => {
                if (res.mapSearchVehicleList.pageList.length > 100) {
                  if (i % toHouse == 0) {
                    var center = new qq.maps.LatLng(e.latitude, e.longitude)
                    var anchor = new qq.maps.Point(15, 15),
                      size = new qq.maps.Size(30, 30),
                      scaleSize = new qq.maps.Size(30, 30),
                      origin = new qq.maps.Point(0, 0),
                      icon = new qq.maps.MarkerImage(
                        'https://pic.bangbangtongcheng.com/locationpic.png',
                        size,
                        origin,
                        anchor,
                        scaleSize
                      )
                    var marker = new qq.maps.Marker({
                      icon: icon,
                      position: center,
                      map: that.map,
                    })
                    that.markersArrays.push(marker)
                    this.H5itself()
                  }
                } else {
                  var center = new qq.maps.LatLng(e.latitude, e.longitude)
                  var anchor = new qq.maps.Point(15, 15),
                    size = new qq.maps.Size(30, 30),
                    scaleSize = new qq.maps.Size(30, 30),
                    origin = new qq.maps.Point(0, 0),
                    icon = new qq.maps.MarkerImage(
                      'https://pic.bangbangtongcheng.com/locationpic.png',
                      size,
                      origin,
                      anchor,
                      scaleSize
                    )
                  var marker = new qq.maps.Marker({
                    icon: icon,
                    position: center,
                    map: that.map,
                  })
                  that.markersArrays.push(marker)
                  this.H5itself()
                }
              })
              // 调整位置
              that.adjustScrollTop()
            } else {
              uni.showToast({
                title: '定位失败',
                icon: 'none',
                mask: true,
              })
              return
            }
            uni.stopPullDownRefresh()
            // #endif
            // #ifdef MP-WEIXIN
            that.Recommend = res.mapSearchVehicleList.pageList
            that.Recount = res.mapSearchVehicleList.pageCount
            let markers = []
            markers.push(that.yuan)
            this.getExport()
            res.mapSearchVehicleList.pageList.forEach((e) => {
              markers.push({
                id: Number(e.id),
                latitude: Number(e.latitude),
                longitude: Number(e.longitude),
                iconPath: 'https://pic.bangbangtongcheng.com/locationpic.png',
                width: 30,
                height: 30,
              })
            })
            this.markerList = markers
            this.WXitself()
            // 调整位置
            that.adjustScrollTop()
            // #endif
          })
      },
      // 地图找店铺
      mapStore() {
        let that = this
        this.referstoreData.distance = this.distance
        this.referstoreData.latitude = this.lat
        this.referstoreData.longitude = this.logt
        this.$myRequest
          .get('/api/mobile/vehicleOwner/mapSearchShop', this.referstoreData)
          .then((res) => {
            // #ifdef H5
            that.downStatus = false
            that.upStatus = true
            that.trigger = false
            if (res.success && res.mapSearchShopList.pageCount > 0) {
              that.Recommend = res.mapSearchShopList.pageList
              that.Recount = res.mapSearchShopList.pageCount
              that.markersArrays = []
              this.getExport()
              res.mapSearchShopList.pageList.forEach((e) => {
                var center = new qq.maps.LatLng(e.latitude, e.longitude)
                var anchor = new qq.maps.Point(15, 15),
                  size = new qq.maps.Size(30, 30),
                  scaleSize = new qq.maps.Size(30, 30),
                  origin = new qq.maps.Point(0, 0),
                  icon = new qq.maps.MarkerImage(
                    'https://pic.bangbangtongcheng.com/locationpic.png',
                    size,
                    origin,
                    anchor,
                    scaleSize
                  )
                var marker = new qq.maps.Marker({
                  icon: icon,
                  position: center,
                  map: that.map,
                })
                that.markersArrays.push(marker)
                this.H5itself()
              })
              // 调整位置
              that.adjustScrollTop()
            } else {
              uni.showToast({
                title: '定位失败',
                icon: 'none',
                mask: true,
              })
              return
            }

            uni.stopPullDownRefresh()

            // #endif
            // #ifdef MP-WEIXIN
            that.Recommend = res.mapSearchShopList.pageList
            that.Recount = res.mapSearchShopList.pageCount
            let markers = []
            markers.push(that.yuan)
            this.getExport()
            res.mapSearchShopList.pageList.forEach((e) => {
              markers.push({
                id: Number(e.id),
                latitude: Number(e.latitude),
                longitude: Number(e.longitude),
                iconPath: 'https://pic.bangbangtongcheng.com/locationpic.png',
                width: 30,
                height: 30,
              })
            })
            this.markerList = markers
            this.WXitself()
            // 调整位置
            that.adjustScrollTop()
            // #endif
          })
      },
      // 地图找服务
      mapService() {
        let that = this
        this.referserveData.distance = this.distance
        this.referserveData.latitude = this.lat
        this.referserveData.longitude = this.logt
        this.$myRequest
          .get('/api/mobile/vehicleOwner/mapSearchService', this.referserveData)
          .then((res) => {
            // #ifdef H5
            that.downStatus = false
            that.upStatus = true
            that.trigger = false
            if (res.success && res.mapSearchServiceList.pageCount > 0) {
              that.Recommend = res.mapSearchServiceList.pageList
              that.Recount = res.mapSearchServiceList.pageCount
              that.markersArrays = []
              this.getExport()
              res.mapSearchServiceList.pageList.forEach((e) => {
                var center = new qq.maps.LatLng(e.latitude, e.longitude)
                var anchor = new qq.maps.Point(15, 15),
                  size = new qq.maps.Size(30, 30),
                  scaleSize = new qq.maps.Size(30, 30),
                  origin = new qq.maps.Point(0, 0),
                  icon = new qq.maps.MarkerImage(
                    'https://pic.bangbangtongcheng.com/locationpic.png',
                    size,
                    origin,
                    anchor,
                    scaleSize
                  )
                var marker = new qq.maps.Marker({
                  icon: icon,
                  position: center,
                  map: that.map,
                })
                that.markersArrays.push(marker)
                this.H5itself()
              })
              // 调整位置
              that.adjustScrollTop()
            } else {
              uni.showToast({
                title: '定位失败',
                icon: 'none',
                mask: true,
              })
              return
            }

            uni.stopPullDownRefresh()

            // #endif
            // #ifdef MP-WEIXIN
            that.Recommend = res.mapSearchServiceList.pageList
            that.Recount = res.mapSearchServiceList.pageCount
            let markers = []
            this.getExport()
            markers.push(that.yuan)
            res.mapSearchServiceList.pageList.forEach((e) => {
              markers.push({
                id: Number(e.id),
                latitude: Number(e.latitude),
                longitude: Number(e.longitude),
                iconPath: 'https://pic.bangbangtongcheng.com/locationpic.png',
                width: 30,
                height: 30,
              })
            })
            this.markerList = markers
            this.WXitself()
            // 调整位置
            that.adjustScrollTop()
            // #endif
          })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      regionchange(e) {
        console.log(e.causedBy, e.type)
        // #ifdef MP-WEIXIN
        if ((e.causedBy == 'drag' || e.causedBy == 'scale') && e.type == 'end') {
          this.getCenterLanLat()
        }
        // #endif
        // #ifdef APP
        if (
          e.causedBy == 'drag' ||
          e.causedBy == 'scale' ||
          (e.causedBy == 'update' && e.type == 'end')
        ) {
          this.getCenterLanLat()
        }
        // #endif
      },

      initMap() {
        TMap().then((qq) => {
          var that = this
          let address = ''
          let lat = that.lat
          let logt = that.logt
          var center = new qq.maps.LatLng(lat, logt)
          var map = new qq.maps.Map(document.getElementById('map'), {
            center: center,
            zoom: 13,
            disableDefaultUI: true,
          })
          this.map = map
          lat = map.getCenter().lat
          logt = map.getCenter().lng
          var anchor = new qq.maps.Point(this.screenWidth / 2, this.screenWidth / 2),
            size = new qq.maps.Size(this.screenWidth, this.screenWidth),
            scaleSize = new qq.maps.Size(this.screenWidth, this.screenWidth),
            origin = new qq.maps.Point(0, 0),
            icon = new qq.maps.MarkerImage(
              'https://pic.bangbangtongcheng.com/61d928e58d47472891609adfc954148f.png',
              size,
              origin,
              anchor,
              scaleSize
            )
          var marker = new qq.maps.Marker({
            icon: icon,
            position: center,
            map: map,
          })
          that.markersArray.push(marker)
          this.H5itself()
          that.getRecommend()
          qq.maps.event.addListener(map, 'center_changed', function () {
            that.Recommend = []
            that.deleteOverlays()
            lat = map.getCenter().lat
            logt = map.getCenter().lng
            that.lat = lat
            that.logt = logt
            let center = new qq.maps.LatLng(lat, logt)
            marker = new qq.maps.Marker({
              icon: icon,
              position: center,
              map: map,
            })
            console.log(lat, logt, '拖拽地图')
            that.markersArray.push(marker)
            that.getRecommend()
          })
          qq.maps.event.addListener(map, 'zoom_changed', function () {
            that.Recommend = []
            var zoomLevel = map.getZoom()
            that.calculateDis(zoomLevel)
            console.log(zoomLevel)
          })
        })
      },
      calculateDis(index) {
        //根据地图比例计算收缩范围
        console.log('缩放级别：' + index)
        let num = index
        var scalx = 8.5
        // #ifdef MP-WEIXIN
        var scalx = Math.min(
          8.5,
          Math.max(
            8.5 -
              (parseFloat(num).toFixed(1) - 6 >= 10
                ? (20 - parseFloat(num).toFixed(1)) * 2.4
                : parseFloat(num).toFixed(1) - 6) *
                0.32,
            5.4
          )
        )
        // #endif
        let r = uni.getSystemInfoSync().screenWidth * scalx //像素半径
        if (3 <= num && num < 4) {
          //代表1000KM
          let zoom = parseFloat(num).toFixed(1) //保留一位小数  就是 1000到500的过程
          if (zoom >= 4) {
            this.distance = r * 500
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减500的过程 就是平均减 500/10 50的过程
            this.distance = r * (1000 - number * 50)
          }
        }
        if (4 <= num && num < 5) {
          //代表500KM
          let zoom = parseFloat(num).toFixed(1) //保留一位小数 就是 500到200的过程
          if (zoom >= 5) {
            this.distance = r * 200
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减200的过程 就是平均减 200/10 20的过程
            this.distance = r * (500 - number * 20)
          }
        }
        if (5 <= num && num < 6) {
          //代表200KM
          let zoom = parseFloat(num).toFixed(1) //保留一位小数  就是 200到100的过程
          if (zoom >= 6) {
            this.distance = r * 100
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减100的过程 就是平均减 100/10 10的过程
            this.distance = r * (200 - number * 10)
          }
        }
        if (6 <= num && num < 7) {
          //代表100KM
          let zoom = parseFloat(num).toFixed(1) //保留一位小数   就是 100到50的过程
          if (zoom >= 7) {
            this.distance = r * 50
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减50的过程 就是平均减 50/10 5的过程
            this.distance = r * (100 - number * 5)
          }
        }
        if (7 <= num && num < 8) {
          //代表50KM
          let zoom = parseFloat(num).toFixed(1) //保留一位小数   就是 50到30的过程
          if (zoom >= 8) {
            this.distance = r * 30
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减20的过程 就是平均减 20/10 2的过程
            this.distance = r * (52 - number * 2)
          }
        }
        if (8 <= num && num < 9) {
          //代表30KM
          let zoom = parseFloat(num).toFixed(1) //保留一位小数  就是 30到20的过程
          if (zoom >= 9) {
            this.distance = r * 20
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减10的过程 就是平均减 10/10 1的过程
            this.distance = r * (30 - number * 1)
          }
        }
        if (9 <= num && num < 10) {
          //代表20KM
          let zoom = parseFloat(num).toFixed(1) //保留一位小数  就是 20到10的过程
          if (zoom >= 10) {
            this.distance = r * 10
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减10的过程 就是平均减 10/10 1的过程
            this.distance = r * (18 - number * 1)
          }
        }
        if (10 <= num && num < 11) {
          //代表10KM
          let zoom = parseFloat(num).toFixed(1) //保留一位小数  就是 10到5的过程
          if (zoom >= 11) {
            this.distance = r * 5
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减5的过程 就是平均减 5/10 0.5的过程
            this.distance = r * (9 - number * 0.5)
          }
        }
        if (11 <= num && num < 12) {
          //代表5km
          let zoom = parseFloat(num).toFixed(1) //保留一位小数   就是 5到2的过程
          if (zoom >= 12) {
            this.distance = r * 2
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减3的过程 就是平均减 3/10 0.3的过程
            this.distance = r * (5 - number * 0.3)
          }
        }
        if (12 <= num && num < 13) {
          //代表2km
          let zoom = parseFloat(num).toFixed(1) //保留一位小数    就是 2到1的过程
          if (zoom >= 13) {
            this.distance = r * 1
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减1的过程 就是平均减 1/10 0.1的过程
            this.distance = r * (2 - number * 0.1)
          }
        }
        if (13 <= num && num < 14) {
          //代表1km
          let zoom = parseFloat(num).toFixed(1) //保留一位小数 就是 1KM到500的过程
          if (zoom >= 14) {
            this.distance = r * 0.6
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减0.5的过程 就是平均减 0.5/10 0.05的过程
            this.distance = r * (1.1 - number * 0.05)
          }
        }
        if (14 <= num && num < 15) {
          //代表500m
          let zoom = parseFloat(num).toFixed(1) //保留一位小数  小  就是 500到200的过程
          if (zoom >= 15) {
            this.distance = r * 0.3
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减0.3的过程 就是平均减 0.3/10 0.03的过程
            this.distance = r * (0.6 - number * 0.03)
          }
        }
        if (15 <= num && num < 16) {
          //代表200m
          let zoom = parseFloat(num).toFixed(1) //保留一位小数    就是 200到100的过程
          if (zoom >= 16) {
            this.distance = r * 0.12
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减0.1的过程 就是平均减 0.1/10 0.01的过程
            this.distance = r * (0.3 - number * 0.01)
          }
        }
        if (16 <= num && num < 17) {
          //代表100m
          let zoom = parseFloat(num).toFixed(1) //保留一位小数    就是 100到50的过程
          if (zoom >= 17) {
            this.distance = r * 0.065
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减0.05的过程 就是平均减 0.05/10 0.005的过程
            this.distance = r * (0.12 - number * 0.005)
          }
        }
        if (17 <= num && num < 18) {
          //代表50
          let zoom = parseFloat(num).toFixed(1) //保留一位小数   就是 50到25的过程
          if (zoom >= 18) {
            this.distance = r * 0.027
          } else {
            let number = zoom.substring(zoom.lastIndexOf('.') + 1) //就是0到9 递归减0.025的过程 就是平均减 0.025/10 0.0025的过程
            this.distance = r * (0.065 - number * 0.0025)
          }
        }
        if (18 <= num && num < 19) {
          //代表25m
          this.distance = r * 0.027
        }
        if (19 <= num && num < 20) {
          //代表10m
          this.distance = r * 0.001
        }
        if (20 <= num) {
          //代表10m
          this.distance = r * 0.001
        }
        console.log('当前查询范围2' + this.distance)
        console.log('屏幕宽度' + uni.getSystemInfoSync().screenWidth)
        console.log('比例尺等级' + num)
      },
      deleteOverlays() {
        if (this.markersArray) {
          for (var i in this.markersArray) {
            this.markersArray[i].setMap(null)
          }
          this.markersArray.length = 0
        }
        if (this.markersArrays) {
          for (var i in this.markersArrays) {
            this.markersArrays[i].setMap(null)
          }
          this.markersArrays.length = 0
        }
      },
      async up() {
        this.Recommend = []
        if (this.markersArrays) {
          for (var i in this.markersArrays) {
            this.markersArrays[i].setMap(null)
          }
          this.markersArrays.length = 0
        }
        this.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          await this.getRecommend()
        }
      },
      down() {
        if (this.Recount == this.Recommend.length) {
          return
        }
        if (this.downStatus) {
          this.pageNo++
          this.getRecommend()
        }
      },
    },
  }
</script>
<style lang="less" scoped>
  .mapTab {
    width: 100%;
    height: 37px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .item {
      position: relative;
      width: 160rpx;
      height: 37px;
      text-align: center;
      line-height: 37px;
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
    }

    .active {
      font-size: 32rpx;
      color: #64b6a8;
    }

    .administrations {
      width: 180rpx;
      height: 390rpx;
      background-color: #fff;
      position: absolute;
      right: 0;
      bottom: -388rpx;
      z-index: 100;
      padding: 0 32rpx;
      display: flex;
      flex-direction: column;

      .items {
        height: 94rpx;
        color: #5a5e66;
        font-size: 28rpx;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &::before {
        content: '';
        display: inline-block;
        border-left: 24rpx solid transparent;
        border-right: 20rpx solid transparent;
        border-bottom: 24rpx solid #fff;
        position: absolute;
        right: 50%;
        top: -15rpx;
        transform: translateX(50%);
      }
    }
  }

  .tittit {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #f8f8f8;
    z-index: 9999;
    max-width: 100%;
    width: 600rpx;
    transition-duration: 0.3s;
    transform: translateX(100%);

    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
    border-bottom: 2rpx solid #cccccc;

    view {
      position: absolute;
      top: 0rpx;
      left: 20rpx;
      color: #999999;
      font-size: 54rpx;
      font-weight: 100;
    }
  }

  .show .tittit {
    transform: translateX(0%);
  }

  .cu-list {
    padding-bottom: 98rpx;
    background-color: #fff;
    .buxian {
      height: 80rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
    }
    .tit {
      position: relative;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 30rpx;
      border-bottom: 2rpx solid #cccccc;

      view {
        position: absolute;
        top: 0rpx;
        left: 20rpx;
        color: #999999;
        font-size: 54rpx;
        font-weight: 100;
      }
    }

    .titlepp {
      height: 100rpx;
      line-height: 100rpx;
      margin-left: 38rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }

    .u-index-anchor {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      background-color: #f2f2f2 !important;
    }

    .list-cell {
      display: flex;
      box-sizing: border-box;
      width: 100%;
      padding: 10px 24rpx;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
      justify-content: space-between;
      align-items: center;

      .list-cell-left {
        display: flex;
        align-items: center;

        .list-cell-left-image {
          width: 60rpx;
          height: 60rpx;
          margin-right: 17rpx;
        }
      }

      .list-cell-right {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .vehicleBrand {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100rpx;

      .vehicleBrand_image {
        width: 100rpx;
        height: 80rpx;
      }

      .vehicleBrand_span {
        font-size: 40rpx;
        font-weight: 400;
        color: #333333;
        margin-left: 5rpx;
      }
    }

    .choiceCarSeries {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background-color: #f2f2f2;
      margin-top: 30rpx;
      padding: 20rpx 0;
      padding-left: 40rpx;

      .item {
        padding: 10rpx 20rpx;
        // height: 50rpx;
        border: 1px solid #333;
        font-size: 24rpx;
        line-height: 50rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;

        .choiceCarSeriesName {
          max-width: 200rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-right: 10rpx;
        }

        .close {
          font-size: 42rpx;
        }
      }
    }

    .vehicleBrand-xzcx {
      width: 100%;
      height: 50rpx;
      background-color: #f2f2f2;
      line-height: 50rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      padding-left: 40rpx;
    }

    .vehicleBrand_item {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;

      .vehicleBrand_item_image {
        width: 142rpx;
        height: 75rpx;
        border-radius: 12rpx;
        margin-left: 50rpx;
      }

      .vehicleBrand_item_span {
        font-size: 30rpx;
        font-weight: 500;
        color: #6f6f6f;
        margin-left: 30rpx;
      }
    }

    .leibie {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .quyu {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .chooseCars {
          width: 503rpx;
          height: 60rpx;
          background-color: #64b6a8;
          border-radius: 12rpx;
          border: 1px solid #64b6a8;
          text-align: center;
          line-height: 60rpx;
          color: #fff;
        }

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .mianji {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;
      margin-right: 50rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;

        .radio {
          width: 33%;
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;

          .radio_item {
            width: 36rpx;
            height: 36rpx;
            border: 1px solid #333;
            border-radius: 36rpx;
            margin-right: 14rpx;

            span {
              font-size: 28rpx;
              font-weight: 500;
              color: #333333;
            }
          }

          .radioxz {
            border: 1px solid #64b6a8;
            position: relative;
          }

          .radioxz::before {
            content: '';
            width: 24rpx;
            height: 24rpx;
            border-radius: 24rpx;
            background-color: #64b6a8;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }

      .customPrice {
        display: flex;
        align-items: center;

        .input {
          width: 88rpx;
          height: 40rpx;
          border-radius: 4rpx;
          border: 1px solid #333333;
          padding: 6rpx;
          color: #64b6a8;
          font-size: 24rpx;
        }

        .minimumPrice {
          position: relative;
        }

        .ceilePrice {
          position: relative;
        }

        .minimumPrice::after {
          content: '最低价';
          width: 100rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #999999;
          text-align: center;
          position: absolute;
          bottom: -34rpx;
          left: 50%;
          transform: translateX(-50%);
        }

        .ceilePrice::after {
          content: '最高价';
          width: 100rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #999999;
          text-align: center;
          position: absolute;
          bottom: -34rpx;
          left: 50%;
          transform: translateX(-50%);
        }

        .confirm {
          width: 120rpx;
          height: 58rpx;
          background-color: #64b6a8;
          border-radius: 4rpx;
          text-align: center;
          line-height: 58rpx;
          color: #fff;
          margin-left: 30rpx;
        }
      }
    }
  }

  .box {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #333;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #333;
    background-color: #fff;

    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      left: 30rpx;
    }
  }

  .map {
    position: absolute !important;
    top: 100rpx;
    bottom: 650rpx;
    width: 750rpx;
  }

  .shaixuan {
    display: inline-block;
    position: absolute;
    font-size: 32rpx;
    right: 60rpx;
    /* #ifdef MP-WEIXIN */
    right: 254rpx;
    line-height: 90rpx;
    /* #endif */
  }

  .shaixuan::before {
    position: absolute;
    content: '';
    top: 36rpx;
    left: 80rpx;
    width: 0;
    height: 0;
    border-color: #333 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 14rpx 8rpx 0rpx 8rpx;
  }

  .listBox {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding-top: 50rpx;
    background-color: #fff;

    .shangla {
      position: absolute;
      top: -4rpx;
      left: 0;
      display: inline-block;
      vertical-align: middle;
      width: 180rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 30rpx;
      color: #999999;
      border: 2rpx solid #e0e0e0;
      text-align: center;
      font-weight: 400;
      font-size: 19rpx;

      image {
        position: absolute;
        width: 32rpx;
        height: 32rpx;
        top: 12rpx;
        left: 5rpx;
      }
    }

    .dingwei {
      position: absolute;
      top: -160rpx;
      right: 30rpx;
      width: 90rpx;
      height: 110rpx;
    }

    .shang {
      position: absolute;
      top: 8rpx;
      width: 21rpx;
      height: 37rpx;
      transform: rotate(-90deg);
      left: 50%;
      margin-left: -18rpx;
    }

    .xia {
      transform: rotate(90deg);
    }

    .listTit {
      position: relative;
      width: 690rpx;
      margin: 10rpx 0;
      margin-left: 50%;
      transform: translate(-50%);
      text-align: center;
      font-size: 32rpx;
      font-weight: 600;
      z-index: 9999;

      .paixu {
        position: absolute;
        top: 4rpx;
        right: 10rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;

        .checkbox {
          width: 22rpx;
          height: 22rpx;
          border: 1px solid #000;
          margin-right: 8rpx;
        }

        .checkboxChage {
          width: 22rpx;
          height: 22rpx;
          background-color: #64b6a8;
          margin-right: 8rpx;
          text-align: center;
          line-height: 22rpx;

          .image {
            width: 20rpx;
            height: 20rpx;
          }
        }
      }
    }

    .sous {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 30rpx;

      .sous_input {
        position: relative;

        .sous_input_s {
          width: 526rpx;
          height: 68rpx;
          border-radius: 37rpx;
          border: 1px solid #999999;
          padding-left: 75rpx;
        }

        .sous_input_img {
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          top: 50%;
          left: 20rpx;
          transform: translateY(-50%);
        }
      }

      .sous_btn {
        width: 152rpx;
        height: 68rpx;
        background-color: #64b6a8;
        border-radius: 37rpx;
        color: #fff;
        text-align: center;
        line-height: 68rpx;
      }
    }

    .px_sx {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 30rpx;
      margin-bottom: 30rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      &.flex-end {
        justify-content: flex-end;
      }

      .pxu {
        position: relative;

        .xuanz {
          width: 300rpx;
          height: 350rpx;
          background-color: #fff;
          position: absolute;
          right: -280rpx;
          bottom: -370rpx;
          box-shadow: 0px 0px 20px 1px #d0d0d0;
          z-index: 100;
          padding: 0 32rpx;
          display: flex;
          flex-direction: column;

          .items {
            height: 88rpx;
            color: #5a5e66;
            font-size: 28rpx;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          &::before {
            content: '';
            display: inline-block;
            border-left: 24rpx solid transparent;
            border-right: 20rpx solid transparent;
            border-bottom: 24rpx solid #fff;
            position: absolute;
            left: 12rpx;
            top: -22rpx;
          }
        }
      }

      .pxu::before {
        position: absolute;
        content: '';
        top: 18rpx;
        left: 70rpx;
        width: 0;
        height: 0;
        border-color: #333 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
        border-style: solid;
        border-width: 14rpx 8rpx 0rpx 8rpx;
      }

      .sxuan {
        position: relative;
        margin-right: 25rpx;
      }

      .sxuan::before {
        position: absolute;
        content: '';
        top: 18rpx;
        left: 70rpx;
        width: 0;
        height: 0;
        border-color: #333 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
        border-style: solid;
        border-width: 14rpx 8rpx 0rpx 8rpx;
      }
    }
  }

  .list {
    margin-left: 30rpx;
    width: 720rpx;

    .liss {
      width: 96%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 2rpx solid #e0e0e0;
      display: flex;

      image {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
        border-radius: 20rpx;
      }

      .li_2 {
        margin-left: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .vehicleRecom {
          font-size: 36rpx;
          font-weight: 600;
          color: #333333;
          line-height: 44rpx;

          .tagLabel {
            vertical-align: top;
            background: #64b6a8;
            color: #fff;
            font-size: 24rpx;
            text-align: center;
            width: 106rpx;
            margin-right: 10rpx;
            padding: 4rpx 6rpx;
            border-radius: 4rpx;
          }
        }

        .price {
          font-size: 28rpx;
          font-weight: 600;
          color: #e00000;
        }
      }

      .li_3 {
        margin-left: 24rpx;

        .servicesAvailable {
          font-size: 32rpx;
          font-weight: 500;
          color: #64b6a8;
        }

        .serviceContent {
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }

  /deep/.map a {
    display: none !important;
  }

  .cu-dialog {
    max-width: 100%;
    width: 600rpx;
  }

  .basis-lg {
    flex-basis: 600rpx;
    overflow: auto;
  }

  .di {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
    left: 74rpx;

    .div {
      display: inline-block;
      width: 300rpx;
      height: 98rpx;
      text-align: center;
      line-height: 98rpx;
      font-size: 30rpx;
    }

    .l {
      background: #e0e0e0;
    }

    .r {
      background: #64b6a8;
      color: #fff;
    }
  }

  .tower-swiper {
    height: 300rpx;
  }

  .tower-swiper .tower-item {
    transform: scale(calc(0.5 + var(--index) / 10));
    margin-left: calc(var(--left) * 100upx - 150upx);
    z-index: var(--index);
    width: 390rpx;
    height: 260rpx;
    left: 44%;
    box-shadow: 0px 13px 12px rgba(0, 0, 0, 0.2);
  }

  .tower-swiper .tower-item.none {
    opacity: 1;
  }

  .Ptop {
    /* #ifdef H5 || APP-PULS */
    // padding-top: 104rpx;
    margin-top: 98rpx;
    /* #endif */

    /* #ifdef MP  */
    // margin-top: 188rpx;
    /* #endif */
  }

  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }

  .AppMap {
    // height: 60%;
    height: 750rpx;
  }
</style>
